<script setup>
import { ref, inject, watch } from "vue";
import { get, set } from "lodash";
import WdIconPicker from '@cwd/widgets/wd-icon-picker'

const props = defineProps({
  component: Object,
  customField: { type: String, default: undefined },
});

const formModel = inject("formModel");
const index = props.customField ?? props.component.dataIndex;
const value = ref(get(formModel.value, index));

// 默认值设置
if (!value.value) {
  value.value = 'vi-ant-design:unordered-list-outlined'
  set(formModel.value, index, 'vi-ant-design:unordered-list-outlined')
}

// 同步值变化
watch(
  () => get(formModel.value, index),
  (vl) => value.value = vl
)
watch(
  () => value.value,
  (v) => set(formModel.value, index, v)
)
</script>

<template>
  <wd-form-item
    v-if="typeof props.component.display === 'undefined' || props.component.display === true"
    :component="props.component"
    :custom-field="props.customField"
  >
    <wd-icon-picker v-model="formModel.icon" :default-value="'vi-ant-design:unordered-list-outlined'" />

  </wd-form-item>
</template>